/**
* @file index.vue
* @author huang
* @date 2023/8/14
* @description Add a brief description of the file here.
* @projectName
* @email newflyhuang@gmail.com
*/

<template>
  <el-container>

    <el-main>
      <pure-table
        :custom-data="data"
        :hide-index="true"
        :list-api="listApi"
        :show-pagination="false"
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
        default-expand-all
        row-key="deptId"
      >
        <template #header>
          <query-panel @query="onQuery" @reset="onReset">
            <el-form-item>
              <el-input v-model="queryData.deptName" placeholder="部门名称" />
            </el-form-item>
            <el-form-item>
              <el-select v-model="queryData.status" placeholder="部门状态">
                <el-option label="启用" value="0" />
                <el-option label="禁用" value="1" />
              </el-select>
            </el-form-item>

          </query-panel>
          <el-button size="small" style="margin: 0 16px 16px " @click="onAdd">
            新增
          </el-button>
        </template>
        <el-table-column label="部门名称" min-width="150px" prop="deptName" />
        <el-table-column label="排序" min-width="40px" prop="orderNum" />
        <el-table-column label="状态" prop="status" min-width="40px">
          <template #default="{row}">
            <el-tag :type="row.status === '0' ? 'info':'danger' ">
              {{ row.status|deptStatus }}
            </el-tag>

            <!--            <el-switch :value="row.status" inactive-value="1" active-value="0" @change="changeSwitch($event,row)" />-->

          </template>

        </el-table-column>
        <el-table-column label="创建时间" prop="createTime" min-width="80px" />
        <el-table-column label="操作">
          <template #default="{row}">
            <el-button type="text" @click="onEdit(row)">
              修改
            </el-button>
            <el-button type="text" @click="onDel(row)">
              删除
            </el-button>

          </template>
        </el-table-column>

      </pure-table>
    </el-main>

    <el-dialog :visible.sync="visible">
      <dialog-update-department :data="deptData" />
    </el-dialog>
  </el-container>
</template>

<script>

import QueryPanel from '@/common/components/query/queryPanel.vue';
import DialogUpdateDepartment from './dialog/addDeaprtment.vue';
import SystemDepartmentManagementApi from './api';
import { convertToTree, } from '@/common/utils/convert';
import { debounce, } from 'lodash';

export default {
  components: { QueryPanel, DialogUpdateDepartment, },
  data() {
    return {
      visible: false,
      listApi: SystemDepartmentManagementApi.getDepartmentList,
      data: [],
      queryData: {
        deptName: '',
        status: '',
      },
      debounce: null,
      deptData: null,
    };
  },
  created() {
    this.debounce = debounce(this.updateDepartment, 300);
  },
  mounted() {
    this.init();
  },
  methods: {
    // 修改状态
    changeSwitch(val, row) {
      this.debounce(val, row);
    },
    // 查询
    onQuery() {
      this.init();
    },
    // 重置
    onReset() {
      this.queryData = {
        deptName: '',
        status: '',
      };
      this.init();
    },
    // 修改状态
    async updateDepartment(val, row) {
      console.log(val, row);
      try {
        row.status = val;
        await SystemDepartmentManagementApi.updateDepartment(row);
      } catch (err) {
        row.status = val === '0' ? '1' : '0';
        this.$message.error(err);
      }
    },
    // 初始化
    async init() {
      const rs = await SystemDepartmentManagementApi.getDepartmentList(this.queryData);
      this.data = convertToTree(rs);
      console.log(this.data);
    },
    // 修改
    onEdit(row) {
      this.deptData = row;
      this.visible = true;
    },
    // 删除
    onDel(row) {
      this.$confirm(`正在删除[${row.deptName}]部门, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(async () => {
        await SystemDepartmentManagementApi.deleteDepartment(row.deptId);
        await this.init();
        this.$message({
          type: 'success',
          message: '删除成功!',
        });
      }).catch();
    },
    // 新增
    onAdd() {
      this.visible = true;
    },
  },
};
</script>

<style lang="scss" scoped>

</style>
